<template>
    <el-dialog title="添加参赛人员" v-model="show" @opened="handleOpenModaled">
      <div class="content-heder-container">
        <el-space>
          <el-input
            v-model="query_data.studentName"
            placeholder="搜索姓名"
          ></el-input>
          <el-input
            v-model="query_data.phone"
            placeholder="搜索手机号"
          ></el-input>
          <el-button
            size="large"
            :icon="Search"
            circle
            @click="() => handleLoad(true)"
            :loading="loading"
          />
        </el-space>
      </div>
  
      <el-table
        :data="data"
        empty-text="未查询到未报名参赛人员"
        v-loading="loading"
      >
        <el-table-column prop="studentId" label="学生ID" />
        <el-table-column prop="studentName" label="姓名" />
        <el-table-column prop="phone" label="手机号码" />
        <el-table-column label="性别" prop="gender" width="72">
          <template #default="scope">
            <el-tag v-if="scope.row.gender == 0" type="danger">女</el-tag>
            <el-tag v-if="scope.row.gender == 1" type="primary">男</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="schoolName" label="学校" />
        <el-table-column prop="date" label="操作">
          <template #default="scope">
            <el-button
              @click="handleStuToJoin(scope.row)"
              :disabled="disabled"
              :loading="loading"
              >报名</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="total"
          @current-change="handlePage"
        />
      </div>
    </el-dialog>
  </template>
  
  <script  setup>
  import { usePage } from "@/hooks/usePage";
  import {
    ApplicationApi,
    GetNotRegisteredStudentsApi,
  } from "@/api/manage/competition";
  import { ref } from "vue";
  import { Search, Delete } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  
  const props = defineProps({
    eventId: Number | String,
  });
  const show = ref(false);
  const { total, data, loading, query_data, handleLoad, handlePage } = usePage({
    api_fn: GetNotRegisteredStudentsApi,
    q_data: {
      studentName: "",
      phone: "",
      eventId: props.eventId,
    },
  });
  const handleOpenModaled = () => {
    handleLoad(true);
  };
  const handleOpenModal = () => {
    show.value = true;
  };
  
  /**
   * 加入报名
   */
  const disabled = ref(false);
  const handleStuToJoin = async (row) => {
    disabled.value = true;
    console.log(row);
    // 报名操作
    let res = await ApplicationApi({
      studentId: row.studentId,
      eventId: props.eventId,
    });
    if (!res.success) {
      ElMessage.error(res.message);
      disabled.value = false;
    } else {
      ElMessage.success(res.message);
      // 获取列表
      handleLoad(true);
      disabled.value = false;
    }
  };
  defineExpose({
    handleOpenModal,
  });
  </script>
  
  <style lang="scss" scoped>
  .content-heder-container {
    padding: 16px 0;
    display: flex;
    align-content: center;
    justify-content: flex-end;
  }
  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 32px 0;
  }
  </style>